<template>
	<div class="office">
		<div class="bar">
      <div v-for="(nfItem, id) in tableData" :key="id" class="item">
        <div class="title">{{ nfItem.title }}</div>
        <div class="desc">
          {{ nfItem.content }}
        </div>
      </div>
      <!-- <div class="list" v-if="tableData.length > 0">
        <div v-for="(nfItem, id) in tableData" :key="id" class="item">
          <div class="title">{{ nfItem.title }}</div>
          <div class="desc">
            {{ nfItem.content }}
          </div>
        </div>
      </div>
			<div v-else style="color: #909399; font-size: 15px; height: 350px;line-height: 350px;width: 100%;text-align: center;">
        暂无数据
      </div> -->
			<!-- <div class="item">
				<div class="title">列车变动通知</div>
				<div class="desc">
					2024年10月1日至10月24日，呼和浩特开K7907次停运；2024年10月3日至10月26日，鄂尔多斯开K7908次停运12。
				</div>
			</div>
			<div class="item">
				<div class="title">列车变动通知</div>
				<div class="desc">
					验票上车后，及时将身份证、车票等证件放回箱包里，不得随意乱放。贵重物品在旅客离开座位时应随身携带，行李要放在视线随时可及之处，列车进站停车期间，务必盯紧行李‌。
				</div>
			</div>
			<div class="item">
				<div class="title">列车变动通知</div>
				<div class="desc">
					因台风影响，铁路上海站计划对途经京沪高铁、沪宁城际、沪宁沿江高铁等线路的部分旅客列车采取临时停运措施5
				</div>
			</div> -->
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import { getNotifyList, getMyMessage } from '@/api/train'

	const tableData = ref<any>([])

	onMounted(() => {
    const userinfo = localStorage.getItem('userinfo');
    if (!userinfo) return;
		let params = {
			pageSize: 3,
			pageNum: 1,
			userId: JSON.parse(userinfo).userId,
		}
		getNotifyList(params).then((res: any) => {
			console.log("getNotifyList========", res.data.records)
			tableData.value = res.data.records
		})
	})

</script>

<style lang="scss" scoped>
	.office {
		height: 815px;
	}
	.bar {
		height: 103px;
		width: 100%;
		background-image: url(@img/global/table-head.png);
		background-size: 101.5% 100%;
		background-position-x: center;
		display: flex;
		margin-top: 20px;
    .list {
      .item {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        .title {
          font-size: 32px;
        }
        .desc {
          position: absolute;
          bottom: 0;
          transform: translateY(113%);
          width: 570px;
          height: 585px;
          text-align: justify;
          line-height: 100px;
          font-size: 32px;
          border-radius: 16px;
          padding: 0 50px;
          box-sizing: border-box;
          background-size: 100% 100%;
          background: url(@img/global/办公信息栏-bg1.png);
          background-size: 100% 100%;
        }
        &:nth-child(2) {
          .desc {
            background: url(@img/global/办公信息栏-bg2.png);
            background-size: 100% 100%;
          }
        }
        &:nth-child(3) {
          .desc {
            background: url(@img/global/办公信息栏-bg3.png);
            background-size: 100% 100%;
          }
        }
        &::before {
          content: '';
          width: 50px;
          height: 50px;
          position: absolute;
          background-image: url(@img/global/arrow1.png);
          background-size: 100% 100%;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, 130%);
        }
        &:nth-child(2)::before {
          background-image: url(@img/global/arrow2.png);
        }
        &:nth-child(3)::before {
          background-image: url(@img/global/arrow3.png);
        }
      }
    }
	}
</style>
